<template>
    <div class="cinema" :style="{height:height}">
        <ul>
            <li v-for="cinema in cinemaList" :key="cinema.cinemaId">
                <div>{{cinema.name}}</div>
                <div class="address">{{cinema.address}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
import http from '../utils/http'
import BetterScroll from "better-scroll"

export default {
    data() {
        return {
            cinemaList: [],
            height:0
        };
    },
    mounted () {
        this.height = document.documentElement.clientHeight - 54 + "px"
        http({
            url:`/gateway?cityId=440300&ticketFlag=1&k=7788177`,
            headers: {
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then((res)=>{
            console.log(res)
            this.cinemaList = res.data.data.cinemas
            this.$nextTick(() => {
                new BetterScroll(".cinema",{
                    scrollbar: {
                        fade: true //滚动时显示滚动条，不滚动时隐藏滚动条
                    }
                })
            })
        })
    }
}
</script>

<style lang="scss" scoped>
    .cinema{
        overflow: hidden;//溢出隐藏才能全better-scroll起作用
        position: relative;//让滚动条相对于cinema定位
    }
    li{
        padding: 5px;
        .address{
            font-size: 12px;
            color: gray;
        }
    }
</style>